<template>
  <div class="cc-config">
    <div class="cc-container">
      <div v-for="(ccItem, idx) in cc" :key="idx" class="cc-row">
        <el-select v-model="ccItem.type" placeholder="选择类型" class="cc-type-select" @change="onCcTypeChange(idx, ccItem)">
          <el-option label="角色" value="role" />
          <el-option label="用户" value="user" />
          <el-option label="部门" value="dept" />
          <el-option label="岗位" value="post" />
          <el-option label="发起人" value="starter" />
          <el-option label="发起人部门负责人" value="starterDeptLeader" />
          <el-option label="发起人上级部门负责人" value="starterDeptParentLeader" />
        </el-select>
        <el-button size="default" class="cc-select-btn" @click="openCcSelector(idx, ccItem.type)" v-if="['role','user','dept','post'].includes(ccItem.type)">选择</el-button>
        <span class="cc-values">
          <template v-if="ccItem.type === 'user'">
            <el-tag
              v-for="(item, i) in ccItem.value"
              :key="i"
              closable
              @close="removeCcValue(idx, i)"
              class="cc-tag user-tag"
            >
              <el-avatar :src="item.avatar" size="16" class="user-avatar" />
              <span class="user-info">{{ item.nickName }} ({{ item.userName }})</span>
            </el-tag>
            <span v-if="!ccItem.value || !ccItem.value.length" class="empty-selected">未选择</span>
          </template>
          <template v-else-if="ccItem.type === 'role'">
            <el-tag
              v-for="(item, i) in ccItem.value"
              :key="i"
              closable
              @close="removeCcValue(idx, i)"
              class="cc-tag role-tag"
            >
              <el-icon class="role-icon"><UserFilled /></el-icon>
              <span class="role-info">{{ item.name || item.roleName }} ({{ item.code || item.roleCode }})</span>
            </el-tag>
            <span v-if="!ccItem.value || !ccItem.value.length" class="empty-selected">未选择</span>
          </template>
          <template v-else-if="ccItem.type === 'dept'">
            <el-tag
              v-for="(item, i) in ccItem.value"
              :key="i"
              closable
              @close="removeCcValue(idx, i)"
              class="cc-tag dept-tag"
            >
              <el-icon class="dept-icon"><OfficeBuilding /></el-icon>
              <span class="dept-info">{{ item.name || item.label || item.deptName }} ({{ item.code || item.deptCode }})</span>
            </el-tag>
            <span v-if="!ccItem.value || !ccItem.value.length" class="empty-selected">未选择</span>
          </template>
          <template v-else-if="ccItem.type === 'post'">
            <el-tag
              v-for="(item, i) in ccItem.value"
              :key="i"
              closable
              @close="removeCcValue(idx, i)"
              class="cc-tag post-tag"
            >
              <el-icon class="post-icon"><Briefcase /></el-icon>
              <span class="post-info">{{ item.name || item.postName }} ({{ item.code || item.postCode }})</span>
            </el-tag>
            <span v-if="!ccItem.value || !ccItem.value.length" class="empty-selected">未选择</span>
          </template>
          <template v-else>
            <el-tag
              v-for="(item, i) in ccItem.value"
              :key="i"
              closable
              @close="removeCcValue(idx, i)"
              class="cc-tag"
            >
              {{ item.name || item.label || item.account || item }}
            </el-tag>
            <span v-if="!ccItem.value || !ccItem.value.length" class="empty-selected">未选择</span>
          </template>
        </span>
        <el-button size="default" type="danger" class="cc-delete-btn" @click="removeCc(idx)">删除</el-button>
      </div>
    </div>
    <el-button size="default" type="primary" @click="addCc" style="margin-top:8px;">添加抄送</el-button>
    
    <!-- 消息推送方式 -->
    <el-form label-width="120px" class="sub-form" style="margin-top:16px;">
      <el-form-item label="推送方式">
        <el-checkbox-group :model-value="notifyMethods" @update:model-value="onNotifyMethodsChange">
          <el-checkbox label="system">系统内部</el-checkbox>
          <el-checkbox label="email">邮件</el-checkbox>
          <el-checkbox label="sms">短信</el-checkbox>
          <el-checkbox label="wechat">微信</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { UserFilled, OfficeBuilding, Briefcase } from '@element-plus/icons-vue'

const props = defineProps({
  cc: Array,
  notifyMethods: Array
})

const emit = defineEmits(['change', 'openSelector'])

/**
 * 添加抄送项
 */
function addCc() {
  props.cc.push({ type: '', value: [] })
  emit('change')
}

/**
 * 删除抄送项
 */
function removeCc(idx) {
  props.cc.splice(idx, 1)
  emit('change')
}

/**
 * 删除抄送值
 */
function removeCcValue(idx, i) {
  props.cc[idx].value.splice(i, 1)
  emit('change')
}

/**
 * 处理抄送类型切换
 */
function onCcTypeChange(idx, ccItem) {
  props.cc[idx].value = []
  emit('change')
}

/**
 * 处理推送方式变更
 */
function onNotifyMethodsChange(value) {
  // 确保notifyMethods数组存在
  if (!props.notifyMethods) {
    // 如果notifyMethods不存在，通过emit通知父组件初始化
    emit('change', { type: 'notifyMethods', value })
    return
  }
  
  // 清空原数组并添加新值
  props.notifyMethods.length = 0
  props.notifyMethods.push(...value)
  emit('change')
}

/**
 * 打开选择器
 */
function openCcSelector(idx, type) {
  // 触发父组件的选择器打开事件
  emit('openSelector', { idx, type, isCc: true })
}
</script>

<style scoped>
.cc-config {
  width: 100%;
}

.cc-container {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 0;
  margin-bottom: 8px;
}

.cc-container::-webkit-scrollbar {
  width: 6px;
}

.cc-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.cc-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.cc-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.cc-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.cc-values {
  margin-left: 8px;
  flex: 1;
}

.cc-type-select {
  width: 120px !important;
  margin-right: 8px;
}

.cc-select-btn {
  margin-right: 8px;
  min-width: 60px;
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
}

.cc-delete-btn {
  margin-left: 8px;
  min-width: 60px;
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
}

.cc-tag {
  margin: 2px 4px 2px 0;
  height: 28px;
  line-height: 26px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  background-color: #f0f9ff;
  border-color: #7dd3fc;
}

.user-tag {
  display: inline-flex;
  align-items: center;
}

.user-avatar {
  margin-right: 4px;
  vertical-align: middle;
}

.user-info {
  font-size: 12px;
  color: #606266;
  line-height: 1.2;
}

.role-tag {
  background-color: #e6f7ff;
  border-color: #91d5ff;
}

.role-icon {
  color: #1890ff;
  margin-right: 4px;
}

.dept-tag {
  background-color: #e6ffe6;
  border-color: #95de64;
}

.dept-icon {
  color: #52c41a;
  margin-right: 4px;
}

.post-tag {
  background-color: #fffbe6;
  border-color: #ffe58f;
}

.post-icon {
  color: #faad14;
  margin-right: 4px;
}

.role-info, .dept-info, .post-info {
  font-size: 12px;
  color: #606266;
  line-height: 1.2;
}

.empty-selected {
  color: #bbb;
  margin-left: 8px;
}

.sub-form .el-form-item {
  margin-bottom: 10px;
}

.sub-form .el-form-item__label {
  color: #b1b3b8;
  font-size: 13px;
}
</style> 